<template>
  <div class="login-log-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>登录日志查询</span>
      </div>
      
      <!-- 查询条件 -->
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable style="width: 150px"/>
        </el-form-item>
        
        <el-form-item label="登录时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            style="width: 350px"
            @change="handleDateChange">
          </el-date-picker>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      
      <!-- 日志表格 - 移除了logID和remark列 -->
      <el-table
        :data="logList"
        border
        v-loading="loading"
        style="width: 100%">
        <el-table-column prop="username" label="用户名" width="120" align="center"/>
        <el-table-column prop="logContent" label="日志内容" min-width="150"/>
        <el-table-column prop="ipAddress" label="IP地址" width="150" align="center"/>
        <el-table-column prop="os" label="操作系统" width="120"/>
        <el-table-column prop="ie" label="浏览器" width="120"/>
        <el-table-column prop="createDate" label="登录时间" width="160" align="center">
          <template #default="{ row }">
            {{ formatDate(row.createDate) }}
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getLogListByCondition } from '@/api/log'
import { format } from 'date-fns'

export default {
  name: 'LoginLog',
  data() {
    return {
      loading: false,
      logList: [],
      total: 0,
      dateRange: [],
      queryParams: {
        username: undefined,
        startDate: undefined,
        endDate: undefined,
        pageNum: 1,
        pageSize: 10
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      this.loading = true
      try {
        // 处理日期范围
        if (this.dateRange && this.dateRange.length === 2) {
          this.queryParams.startDate = this.formatDate(this.dateRange[0], 'yyyy-MM-dd')
          this.queryParams.endDate = this.formatDate(this.dateRange[1], 'yyyy-MM-dd')
        } else {
          this.queryParams.startDate = undefined
          this.queryParams.endDate = undefined
        }

        const response = await getLogListByCondition(this.queryParams)
        
        if (response.code === 200) {
          this.logList = response.data || []
          this.total = response.total || 0
        } else {
          this.$message.error(response.msg || '获取日志失败')
        }
      } catch (error) {
        console.error('获取日志失败:', error)
        this.$message.error('获取日志失败: ' + (error.message || '未知错误'))
      } finally {
        this.loading = false
      }
    },
    handleDateChange(val) {
      this.dateRange = val
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.dateRange = []
      this.queryParams = {
        username: undefined,
        startDate: undefined,
        endDate: undefined,
        pageNum: 1,
        pageSize: 10
      }
      this.getList()
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    },
    formatDate(date, pattern = 'yyyy-MM-dd HH:mm:ss') {
      return date ? format(new Date(date), pattern) : ''
    }
  }
}
</script>

<style scoped>
.login-log-container {
  padding: 20px;
}
.box-card {
  margin-bottom: 20px;
}
.search-form {
  margin-bottom: 20px;
}
.pagination-container {
  margin-top: 20px;
  text-align: center;
}
</style>